<template>
  <div class="listMain">
    <div class="button-rows">
      <el-button type="primary" @click="this.editForm = {}; dialogVisible=true">新增</el-button>
    </div>
    <el-table :data="tableData" border class="table" v-loading="loading" highlight-current-row max-height="600"
              height="600">
      <el-table-column type="index" width="50"/>
      <el-table-column prop="startTime" label="请假开始时间"/>
      <el-table-column prop="endTime" label="请假结束时间"/>
      <el-table-column prop="reason" label="请假理由"/>
      <el-table-column prop="leaveType" label="请假类型"/>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column prop="days" label="请假天数"/>
      <el-table-column prop="approveStatus" label="审批状态">
        <template #default="scope">
          {{getApproveStatusName(scope.row.approveStatus)}}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row)"
          >编辑
          </el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="确定删除?" @confirm="handleDelete(scope.row)">
            <template #reference>
              <el-button type="text">删除</el-button>
            </template>
          </el-popconfirm>
          <el-divider direction="vertical"></el-divider>
          <el-popconfirm title="确定发起流程?" @confirm="startFlow(scope.row)">
            <template #reference>
              <el-button type="text">发起流程</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        class="pagination"
        v-model:currentPage="currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
    <TLeaveApplyDialog
        :dialogVisibleProp="dialogVisible"
        @close="dialogVisible=false"
        :editForm="editForm"
        :callBackFunc="get"></TLeaveApplyDialog>
  </div>
</template>

<script>
import TLeaveApplyDialog from './TLeaveApplyDialog'

export default {
  name: "TLeaveApplyList",
  components: {TLeaveApplyDialog},
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      total: 0,
      currentPage: 1,
      pageSize: 10,
      editForm: {},
      loading: false
    }
  },
  methods: {
    getApproveStatusName(status) {
      let statusName = '';
      switch (status) {
        case 0:
          statusName = '未发起';
          break;
        case 1:
          statusName = '审批中';
          break;
        case 2:
          statusName = '已结束';
          break;
        default:
          statusName = '状态值错误';
      }
      return statusName;
    },
    async startFlow(row) {
      if (row.approveStatus !== 0) {
        this.$message.error('该状态不允许发起流程');
        return;
      }
      // 查询流程定义ID
      let params = {
        key: 'leave_apply_2022',
        latest: true
      }
      this.loading = true;
      rs = await this.$http.get(`/flowableapi/repository/process-definitions`, {params});
      if (rs.data.data.length === 0) {
        this.$message.error('流程未发布, 请先发布模型');
        return;
      }
      let definitionModel = rs.data.data[0];
      params = {
        processDefinitionId: definitionModel.id,
        businessKey: row.id
      }
      let rs = await this.$http.post(`/flowableapi/runtime/process-instances`, params);
      if (rs.data.id) {
        this.$message.success('流程发起成功');
      }
      this.loading = false;
      this.get();
    },
    handleEdit(row) {
      if (row.approveStatus !== 0) {
        this.$message.error('该状态不允许编辑');
        return;
      }
      this.editForm = row;
      this.dialogVisible = true;
    },
    handleDelete(row) {
      if (row.approveStatus !== 0) {
        this.$message.error('该状态不允许删除');
        return;
      }
      let id = row.id;
      let params = {id};
      this.$http.delete(`/flowableapi/t_leave_apply/delete`, {params}).then((res) => {
        if (res.data.success) {
          this.$message.success('删除成功');
          this.get();
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.get();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.get();
    },
    get() {
      let params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize
      }
      this.loading = true
      this.$http.get(`/flowableapi/t_leave_apply/list`, {params}).then((res) => {
        this.loading = false
        res = res.data;
        if (res.success) {
          this.total = res.data.total;
          this.tableData = res.data.records;
        }
      })
    }
  },
  mounted() {
    this.get();
  }
}
</script>

<style scoped lang="less">
.listMain {
  padding: 10px;

  .button-rows {
    text-align: left;
    padding-bottom: 20px;
  }

  .pagination {
    padding-top: 20px;
    text-align: right;
  }
}
</style>
